<template>
  <div class="heal">
    <div class="health-tab">
      <span @click="cur=0" :class="{tabActive:cur==0}">科室宣教</span>
      <span @click="cur=1" :class="{tabActive:cur==1}">视频宣教</span>
    </div>
    <ul v-show="cur==0">
      <a @click="tohtinfo(item.content,'/htinfo')" v-for="(item, index) in healthList" :key="index">
        <div class="li" @click="getbgc(index)" :class="{'active':ind === index}">
          <div class="borderbox"></div>
          <span class="span">{{item.title}}</span>
          <div class="time">{{item.transferTime}}</div>
        </div>
      </a>
    </ul>
    <ul v-show="cur==1">
      <a
        @click="tohtinfo(item.content,'/htvideo')"
        v-for="(item, index) in healthvideo"
        :key="index"
      >
        <div class="li" @click="getbgc(index)" :class="{'active':ind === index}">
          <div class="borderbox"></div>
          <span class="span">{{item.title}}</span>
          <div class="time">{{item.transferTime}}</div>
        </div>
      </a>
    </ul>
    <div class="layder" v-if="showflag">
      <div class="lay-cont">
        <div class="stateimg">
          <img src="../../../static/images/indexone/state03.png" />
        </div>
        <p>当前列表暂无内容!</p>
      </div>
    </div>
  </div>
</template>

<script>
import urls from '../../common.js'
export default {
  data () {
    return {
      ind: '',
      cur: 0,
      healthvideo: [],
      showflag: false,
      content: ''
    }
  },
  created () {
    this.cur = this.$route.query.cur || 0
    this.findAllVideo()
  },
  methods: {
    getbgc (index) {
      this.ind = index
    },
    findAllVideo () {
      // 视频宣教
      var _this = this
      _this.$http.get(urls.findAllVideo).then(result => {
        _this.healthvideo = result.body.data
      })
    },
    tohtinfo (res, params) {
      if (!res) {
        this.showflag = true
        setTimeout(() => {
          this.showflag = false
        }, 3000)
      } else {
        this.$router.push({
          query: { id: res, dpId: this.dpId },
          path: params
        })
      }
    }
  },
  props: ['dpId', 'healthList']
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl';

.health-tab {
  height: 0.87rem;
  line-height: 0.87rem;
  border-bottom: 2px solid #e8e9ee;
  margin: 0 0.3rem 0.3rem 0.3rem;
  padding: 0 0.3rem;

  span {
    display: inline-block;
    height: 0.86rem;
    color: #5e7996;
    font-size: 0.28rem;

    &:nth-of-type(1) {
      margin-right: 0.4rem;
    }
  }

  .tabActive {
    color: $color-main;
    border-bottom: 4px solid $color-main;
  }
}

ul {
  max-height: 9.9rem;
  overflow-y: auto;
}

.li {
  height: 0.7rem;
  border-radius: 0.1rem;
  background-color: $color-white;
  box-shadow: 2px 3.464px 12px 0px rgba(127, 135, 143, 0.3);
  padding: 0 0.3rem;
  line-height: 0.7rem;
  margin: 0 0.3rem 0.2rem 0.3rem;

  .borderbox {
    float: left;
    width: 0.04rem;
    height: 0.3rem;
    background-color: $color-main;
    margin: 0.2rem 0.2rem 0 0;
  }

  .span {
    font-size: 0.24rem;
    color: $color-health;
  }

  .time {
    float: right;
    font-size: 0.2rem;
    color: $color-health1;
  }
}

.active {
  background-color: $color-bgc;
}

.layder {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  .lay-cont {
    width: 4rem;
    height: 2.3rem;
    background-color: rgba(0, 0, 0, 0.4);
    margin: 4.8rem auto;
    border-radius: 0.3rem;
    color: #fff;
    text-align: center;
    padding-top: 0.4rem;

    .stateimg {
      width: 0.78rem;
      height: 0.78rem;
      margin: 0 auto 0.4rem auto;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
